<template>
  <div id="app">
    <div class="ddloading" v-if="!isLogin">
      <van-loading size="24px" color="#FFF" vertical>{{ loadingtxt }}</van-loading>
    </div>
    <transition name="slide">
      <template v-if="isLogin">
        <keep-alive v-if="$route.meta.keepAlive">
          <router-view></router-view>
        </keep-alive>
        <router-view v-else></router-view>
      </template>
    </transition>
  </div>
</template>
<script>
import { ddLogin } from '@/api/user'
import { removeWatermark, setWaterMark } from '@/utils/watermark'
import * as dd from 'dingtalk-jsapi'

export default {
  name: 'App',

  data() {
    return {
      isLogin: false,
      dpToken: '',
      loadingtxt: '钉钉授权中...',
      logs: []
    }
  },
  created() {
    console.log(location.href)
    if (this.$isDD) {
      console.log('当前在钉钉环境中', dd)
    } else {
      // 非钉钉环境之间测试
      console.log('APP: 当前不在钉钉环境中')
      this.isLogin = true
    }

    if (!this.$store.getters.ticket) {
      this.$router.onReady(() => {
        if (this.$route.query.zt_token !== undefined && this.$route.query.zt_token != null) {
          this.dpToken = this.$route.query.zt_token
          this.loadingtxt = '获取到zt_token，登录中...'
          this.getAuth()
        } else {
          this.loadingtxt = '没有拿到zt_token'
        }
      })
    } else {
      this.isLogin = true
    }
  },
  mounted() {},
  destroyed() {
    removeWatermark()
  },
  methods: {
    updateLogin(e) {
      this.isLogin = e
    },
    handleForceLogin() {
      this.isLogin = true
    },
    async getAuth() {
      const res = await ddLogin({ code: this.dpToken })
      if (res && res.value && res.value.ticket) {
        this.isLogin = true
        this.$store.commit('SET_TICKET', res.value.ticket)
        // TODO 调用查询配置信息接口
        if (res.value.name) {
          setWaterMark(res.value.name, new Date().toLocaleString())
        }
      } else {
        this.$toast.fail('获取TICKET失败')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ddloading {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.slide-enter-active {
  transition: all 0.5s ease;
}
.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-enter, .slide-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  // transform: translateX(10px);
  opacity: 0;
}
</style>
